<template>
  <wsPage title="优惠劵列表">
    <div slot="page_operate">
      <Button @click="refresh">
        <Icon type="refresh"></Icon><span>刷新</span>
      </Button>
    </div>
    <wsSmPanel
      :page="table.page"
      @simple-query="query"
      @page-change="query"
    >
      <div slot="query_form">
        <Form
          :model="queryForm"
          :label-width="100"
        >
          <FormItem label="状态">
            <RadioGroup
              v-model="queryForm.status"
              type="button"
              @on-change="queryParamChange"
            >
              <Radio label="1">已上线</Radio>
              <Radio label="2">已下线</Radio>
            </RadioGroup>
          </FormItem>
          <FormItem label="过期时间">
            <Row>
              <Col span="2">
              <FormItem>
                <DatePicker
                  type="date"
                  placeholder="查询开始时间"
                  v-model="queryForm.createDate"
                  @on-change="handlechange"
                ></DatePicker>
              </FormItem>
              </Col>
              <Col class="subtract" span="1">-</Col>
              <Col span="2">
              <FormItem>
                <DatePicker
                  type="date"
                  placeholder="查询结束时间"
                  v-model="queryForm.dealineDate"
                  @on-change="handlechangend"
                ></DatePicker>
              </FormItem>
              </Col>
            </Row>
          </FormItem>
          <FormItem label="名称">
            <Input
              v-model="queryForm.name"
              placeholder="券名"
              style="width: 20%;"
            ></Input>
          </FormItem>
        </Form>
      </div>
      <div slot="list_operate">
        <Button @click="showAddModal1">发布优惠券</Button>
      </div>

      <div slot="list_data">
        <ws-table
          :data="table.data"
          style="width: 100%"
        >
          <ws-table-column
            align="center"
            label="名称"
            prop="name"
          >

          </ws-table-column>
          <ws-table-column
            align="center"
            label="图片"
          >
            <template slot-scope="scope">
              <div style="display:flex;height:100px;">
                <img
                  :src="scope.row.imgUrl"
                  alt=""
                  style="width:160px;height:90px;"
                >
              </div>
            </template>
          </ws-table-column>
          <ws-table-column
            align="center"
            prop="couponAmount"
            label="面额"
          ></ws-table-column>
          <ws-table-column
            align="center"
            prop="satisfyAmount"
            label="满多少可用"
          ></ws-table-column>
          <ws-table-column
            align="center"
            prop="publishNum"
            label="发布数量"
          >
            <template slot-scope="scope">
              <Tag
                v-if="scope.row.publishNum == -1"
                color="green"
              >无限</Tag>
              <Tag
                v-if="scope.row.publishNum != -1"
                color="blue"
              >{{scope.row.publishNum}}</Tag>
            </template>
          </ws-table-column>
          <ws-table-column
            align="center"
            label="发放时间"
            prop="createDate"
          ></ws-table-column>
          <ws-table-column
            align="center"
            label="过期时间"
            prop="dealineDate"
          ></ws-table-column>
          <ws-table-column
            align="center"
            label="领取数量"
            prop="recieveNum"
          ></ws-table-column>
          <ws-table-column
            align="center"
            label="使用数量"
            prop="useNum"
          ></ws-table-column>
          <!-- <ws-table-column align="center" prop="status" label="状态" width="120" fixed="right" >
            <template slot-scope="scope">
							<Tag v-if="scope.row.status == 1" color="green">已上线</Tag>
							<Tag v-if="scope.row.status == 2" color="blue">已下线</Tag>
            </template>
          </ws-table-column> -->
          <ws-table-column
            align="center"
            label="操作"
            fixed="right"
          >
            <template slot-scope="scope">
              <Button
                @click="offCoupon(scope.row)"
                type="text"
                size="small"
                v-if="scope.row.status == 1"
              >下架</Button>
              <Button
                @click="onCoupon(scope.row)"
                type="text"
                size="small"
                v-if="scope.row.status == 2"
              >上架</Button>
              <Button
                @click="exportCode(scope.row)"
                v-if="scope.row.codeFlag == 1"
              >导出券码</Button>
            </template>
          </ws-table-column>
        </ws-table>
      </div>
    </wsSmPanel>

  </wsPage>
</template>

<script>
import Util from "../../../common/util.js";
import Common from "../../../common/common.js";
import $ from "jquery";

export default {
  data() {
    return {
      //条件查询
      queryForm: {
        name: "",
        status: "1", // 1.已上架  2.已下架
        createDate: "",
        dealineDate: "",
        useNum:'',
        recieveNum:''
      },
      table: {
        data: [],
        page: {
          total: 0, //总条数
          pageNum: 1, //当前页
          pageSize: 10 //每页显示条数
        }
      }
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    handlechange(date) {
      this.queryForm.createDate = date;
    },
    handlechangend(date) {
      this.queryForm.dealineDate = date;
    },
    init() {
      this.query();
    },
    /**
     * 表单查询
     */
    query() {
      let queryData = this.queryForm;
      let _this = this;
      this.axios
        .get(
          "/ws/ops/coupons/" +
            this.table.page.pageNum +
            "/" +
            this.table.page.pageSize,
          { params: queryData }
        )
        .then(response => {
          var res = response.data;
          var resMeta = res.meta;
          if (0 == resMeta.code) {
            console.log(res.data);
            _this.buildPageData(res.data);
          } else {
            _this.$Message.warning(resMeta.message);
          }
        });
    },

    /**
     * 构建表格数据
     */
    buildPageData(data_) {
      this.table.data = data_.list;
      this.table.page.total = data_.total;
    },
    //刷新重置查询
    refresh() {
      this.queryForm.name = "";
      this.queryForm.status = "1";
      this.queryForm.createDate = "";
      this.queryForm.dealineDate = "";
      this.queryForm.useNum = "";
      this.queryForm.recieveNum = "";

      this.table.data = [];
      this.table.page.total = 0;
      this.table.page.pageNum = 1; //当前页
      this.table.page.pageSize = 10; //每页显示条数
      this.query();
    },
    /**
     * 查询切换
     */
    queryParamChange() {
      this.table.data = [];
      this.table.page.total = 0;
      this.table.page.pageNum = 1; //当前页
      this.query();
    },
    /**
     * 打开新增模态框
     */
    showAddModal1() {
      this.$router.push({ name: "ops_coupon_add" });
    },
    /**
     * 优惠券下架
     */
    offCoupon(row_) {
      const _this = this;
      this.$confirm({
        title: "操作提示",
        width: 300,
        content: "确认下架该优惠券?",
        onOk: function() {
          _this.closeCoupon(row_.id);
        }
      });
    },
    /**
     * 优惠券下架
     */
    closeCoupon(couponId) {
      let _this = this;
      this.axios.put("/ws/ops/coupon/close/" + couponId).then(response => {
        var res = response.data;
        var resMeta = res.meta;
        if (0 == resMeta.code) {
          _this.$Message.info("优惠券下架成功");
          _this.query();
        } else {
          _this.$Message.warning(resMeta.message);
        }
      });
    },
    /**
     * 优惠券上架
     */
    onCoupon(row_) {
      const _this = this;
      this.$confirm({
        title: "操作提示",
        width: 300,
        content: "确认上架该优惠券?",
        onOk: function() {
          _this.openCoupon(row_.id);
        }
      });
    },
    /**
     * 优惠券上架
     */
    openCoupon(couponId) {
      let _this = this;
      this.axios.put("/ws/ops/coupon/open/" + couponId).then(response => {
        var res = response.data;
        var resMeta = res.meta;
        if (0 == resMeta.code) {
          _this.$Message.info("优惠券上架成功");
          _this.query();
        } else {
          _this.$Message.warning(resMeta.message);
        }
      });
    },
    /**
     * 导出券码
     */
    exportCode(row_) {
      const _this = this;
      this.$confirm({
        title: "操作提示",
        width: 300,
        content: "确认导出券码?",
        onOk: function() {
          _this.exportCouponCode(row_.id);
        }
      });
    },
    /**
     * 导出券码
     */
    exportCouponCode(id) {
      let _this = this;
      this.axios
        .put("/ws/ops/coupon/code/export/" + id)
        .then(function(response) {
          console.log(response);
          let res = response.data;
          // if (0 === res.meta.code) {
          //   _this.$Message.success("导出优惠券码成功");
          // } else {
          //   let message_ = res.meta.message;
          //   _this.$Message.warning("导出优惠券码成功失败:" + message_);
          // }
        });
    }
  }
};
</script>
<style scoped>
.subtract{
  width: 10px;
  margin-left: 5px;
}
.ws-form-select {
  width: 162px;
}
.title-row {
  padding: 10px;
}
.tab-demo {
  margin-bottom: 10px;
}

#preview-mask {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  overflow: auto;
  display: none;
}

#preview-mask .x-layer {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#preview-mask .x-layer .inner-box {
  width: 384px;
  height: 810px;
  position: relative;
  background: url(../../../assets/images/product/iphonex.png) no-repeat;
}

#preview-mask .x-layer .inner-box .close-btn {
  position: absolute;
  top: -15px;
  right: -15px;
  font-size: 20px;
  text-align: center;
  line-height: 26px;
  width: 30px;
  height: 30px;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 50%;
  cursor: pointer;
}

#preview-mask .x-layer .inner-box .layer-content {
  position: absolute;
  border-radius: 40px;
  top: 21px;
  left: 21px;
  width: 338px;
  height: 767px;
  border: 1px solid #999;
  background: #f9f9f9;
  overflow-x: auto;
}

#preview-mask .x-layer .inner-box .detail-more {
  position: absolute;
  border-radius: 40px;
  top: 21px;
  left: 21px;
  width: 338px;
  height: 767px;
  border: 1px solid #999;
  background: #f9f9f9;
}
</style>